<template>
  <el-form
    :model="userInfoData"
    ref="formRef"
    size="large"
    label-width="8%"
    hide-required-asterisk
  >
    <div class="modify">
      <el-form-item prop="realName" label="真实姓名">
        <el-input
          show-word-limit
          maxlength="20"
          v-model.trim="userInfoData.realname"
          placeholder="请输入真实姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="gender" label="性别">
        <el-radio-group v-model="userInfoData.gender" name="gender">
          <el-radio value="0" label="男"> </el-radio>
          <el-radio value="1" label="女"> </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="mobile" label="手机号码">
        <el-input
          show-word-limit
          maxlength="11"
          v-model.trim="userInfoData.mobile"
          placeholder="请输入手机号码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱号码">
        <el-input
          type="email"
          v-model.trim="userInfoData.email"
          placeholder="请输入邮箱号码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="status" label="状态" name="status">
        <el-radio-group v-model="userInfoData.status" name="status" id="status">
          <el-radio :value="false" label="禁用" name="disable"> </el-radio>
          <el-radio :value="true" label="启用" name="enable"> </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="department" label="部门名称">
        <el-select placeholder="请选择" v-model="userInfoData.departmentId">
          <el-option
            v-for="item in entrieDepartmentsMap"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="roleId" label="角色名称">
        <el-select placeholder="请选择" v-model="userInfoData.roleId">
          <el-option
            v-for="item in entrieRolesMap"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>
    <div class="btns">
      <el-button icon="Refresh" @click="resetFormClick(formRef)"
        >重置</el-button
      >
      <el-button icon="Edit" type="primary" @click="handleModifyClick(formRef)"
        >提交</el-button
      >
    </div>
  </el-form>
</template>

<script setup lang="ts">
// 模块引入
import { ref, reactive } from 'vue'
import type { FormInstance } from 'element-plus'
import { storeToRefs } from 'pinia'
import useLoginStore from '@/store/login'
import useMainStore from '@/store/main/main'
import type { IUser } from '@/api/types'

defineOptions({
  // 组件名称
  name: 'UserInfoComp',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

// 1、定义传入的属性接口
type IUserInfo = Required<
  Pick<
    IUser,
    | 'realname'
    | 'gender'
    | 'email'
    | 'mobile'
    | 'departmentId'
    | 'roleId'
    | 'status'
  >
>

// 2、定义组件内部状态
const loginStore = useLoginStore()
const { userInfo } = storeToRefs(loginStore)

const userInfoData = reactive<IUserInfo>({
  realname: userInfo?.value?.realname ?? '',
  gender: userInfo?.value?.gender ?? '',
  email: userInfo?.value?.email ?? '',
  mobile: userInfo?.value?.mobile ?? '',
  departmentId: userInfo?.value?.departmentId ?? '',
  roleId: userInfo?.value?.roleId ?? '',
  status: userInfo?.value?.status ?? false
})

const mainStore = useMainStore()
const { entrieRolesMap, entrieDepartmentsMap } = mainStore

// 3、定义组件触发的事件
const emit = defineEmits(['handleModify'])

// 5、表单重置引用
const formRef = ref<FormInstance>()
function resetFormClick(formRef: FormInstance | undefined) {
  if (!formRef) return
  formRef.resetFields()
}

// 6、修改
function handleModifyClick(formRef: FormInstance | undefined) {
  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      emit('handleModify', userInfoData)
    }
  })
}
</script>

<style scoped lang="scss">
.modify {
  margin-top: 20px;
  margin-bottom: 80px;
}
.btns {
  margin-left: 800px;
}
</style>
